<!--
 * @Description: 
 * @Date: 2024-04-11 16:32:06
 * @LastEditTime: 2024-04-28 15:42:46
-->
<template>
  <div
    class="message-box"
    :id="`message-${msg.info.csId}`"
    :style="{
      top: msg.aaa[1] + 'px',
      left: msg.aaa[0] + 'px',
      color: '#fff',
    }"
  >
    <div class="inner">
      <div>{{ msg.info.csName }}</div>
      <div>电话:{{ msg.info.phone }}</div>
      <div>站长:{{ msg.info.phone }}</div>
      <div>开放时间:80:00:00-18:00:00</div>
      <img
        @click="skip"
        src="../../../../assets/images/skip.png"
        style="width: 20px; position: absolute; top: 40px; right: 40px"
      />
    </div>
  </div>
</template>

<script>
import router from "../../../../router/index";
export default {
  name: "MessageBox",
  props: {
    msg: {
      type: Object,
    },
    num: {
      type: Number,
    },
  },
  mounted() {
    console.log(this.msg.num, "this.msg");
  },
  methods: {
    skip() {
      this.$messageBox.hide(() => {});
      router.push(
        `/contact?num=${this.msg.num}&id=${this.msg.info.csId}&name=${this.msg.info.csName}`
      );
    },
    hide() {
      this.$messageBox.hide(() => {});
    },
  },
  watch: {
    msg: {
      handler(value) {
        this.$forceUpdate();
      },
      immediate: true,
      deep: true,
    },
  },
};
</script>

<style lang="scss" scope>
.message-box {
  position: absolute;
  width: 300px;
  height: 200px;
  background-image: url("../../../../assets/images/digitzation/kaung.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  transform: translate(-50%, -120%);
  padding: 40px;
  .inner {
    font-size: 16px;
    font-weight: bold;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
}
</style>
